<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-09-27 16:02:37
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-10-18 13:33:09
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\statistics\safetyStatistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fire-wrap">
    <div class="firms-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="监管等级统计" />
      <div class="firms-content content-box">
        <div class="total">{{ firmsData.name }}
          <h3>{{ firmsData.value }}</h3>
        </div>
        <ul>
          <li v-for="it, ind in firmsData.classifyData" :key="ind">
            <span class="name">{{ it.name }}</span>
            <b>{{ it.value }}</b>
          </li>
        </ul>
      </div>
    </div>
    <div class="fireFighting-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="消防重点部位" />
      <div class="fireFighting-content">
        <ul>
          <li v-for="it, ind in fireFightingData" :key="ind">
            <i class="iconfont" v-html="it.icon" />
            <b>{{ it.value }}</b>
            <span class="name">{{ it.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <customTitle :is-line="true" bg-color="#3795ff" title="应急队伍" />
    <div ref="barChart" class="barChartTeam" style="height: 200px;" />
    <div class="danger-box">
      <customTitle :is-icon="true" icon="&#xe790;" bg-color="#fcac00" icon-color="#fcac00" title="隐患排查治理">
        <template #right>
          <custom-timer class="home-page-year" :date-value.sync="yearlbtj" :is-interval="false" type="year" title="" @change="pitfallSearch" />
        </template>
      </customTitle>
      <div class="danger-content-area">
        <div class="danger-content content-box">
          <div class="total">{{ dangerData.name }}
            <h3>{{ dangerData.value }}</h3>
          </div>
          <ul>
            <li v-for="it, ind in dangerData.classifyData" :key="ind">
              <span class="name">{{ it.name }}</span>
              <b>{{ it.value }}</b>
            </li>
          </ul>
        </div>
        <div class="danger-content danger-content1 content-box">
          <div class="total">{{ dangerRectifyData.name }}
            <h3>{{ dangerRectifyData.value }}</h3>
          </div>
          <ul>
            <li v-for="it, ind in dangerRectifyData.classifyData" :key="ind">
              <span class="name">{{ it.name }}</span>
              <b>{{ it.value }}</b>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <customTitle :is-line="true" bg-color="#3795ff" title="隐患类别统计">
      <!--      <template #right>-->
      <!--        <custom-timer class="home-page-year" :date-value.sync="yearlbtj" :is-interval="false" type="year" title="" @change="dangerCategoryAnalysis" />-->
      <!--      </template>-->
    </customTitle>
    <div ref="barChart1" class="barChart1-area" style="height: 200px;" />

    <template>
      <customTitle :is-line="true" bg-color="#3795ff" title="事故等级分析" />
      <div ref="accidentLevel" class="accidentLevel" style="height: 200px;" />
    </template>

    <customTitle :is-line="true" bg-color="#3795ff" title="报警类型统计">
      <template #right>
        <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="yearbjlx" @change="searchBjlx" />
      </template>
    </customTitle>
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="index" is-scroll @change="tagChange" />
    </div>
    <div class="pieChart-area">
      <div ref="pieChart" class="alarm-wrap" style="height: 200px;text-align: center;" />
      <ul class="stasticBox">
        <li v-for="it, ind in stasticData" :key="ind">
          <div class="iconBox">
            <i class="iconfont" v-html="it.icon" />
          </div>
          <div class="numBox">
            <h3 class="name">{{ it.name }}</h3>
            <b>{{ it.value }}</b>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import customTitle from '@/components/globals/custom-title.vue'
// import customTimer from '@/components/common/custom-timer.vue'
import { lineChart, lineHorizontalChart, pieChart } from '@/utils/chart'
// import { parseTime } from '@/utils'
import { currentTime } from '@/utils/dayJs'
import {
  accidentEventLevel,
  dangerCategoryAnalysis,
  dangersLedgerRate,
  dangersLevelNum,
  emergencyTeamNum,
  environmentEventNumText,
  getCompanyStatistics,
  getExpertStatistics, highBuildHomePage,
  importantPositionNum,
  selecteventTypeAlarmCount,
  selectVideoeventTypeAlarmCount
} from '@/api/fireFighting.js'
import CustomTimer from '@/components/common/custom-timer.vue'
import commonList from '@/assets/mixin/commonList'

export default {
  inject: ['layout'],
  components: {
    CustomTimer,
    customTitle
    // customTimer
  },
  mixins: [commonList],
  data() {
    return {
      yearlbtj: currentTime('年') + '',
      yearbjlx: currentTime('年') + '',
      // 企业数量
      firmsData: {
        name: '企业总数',
        value: 0,
        classifyData: [
          { name: '火灾高危单位', value: 0 },
          { name: '消防安全重点单位', value: 0 },
          { name: '一般单位', value: 0 }
        ]
      },
      // 消防重点部位
      fireFightingData: [
        { name: '性质重要、发生事故影响全局部位', value: 0, icon: '&#xec54;' },
        { name: '易燃易爆、危化品场所', value: 0, icon: '&#xe69d;' },
        { name: '其他', value: 0, icon: '&#xe634;' },
        { name: '人员和物资集中场所', value: 0, icon: '&#xe792;' },
        { name: '科研生产试验场所', value: 0, icon: '&#xe63e;' },
        { name: '消防设备设施场所', value: 0, icon: '&#xe60e;' }
      ],
      // 隐患数量
      dangerData: {
        name: '隐患数量',
        value: 0,
        classifyData: [
          { name: '重大隐患', value: 0, key: 'zdTotal' },
          { name: '一般隐患', value: 0, key: 'ybTotal' }
        ]
      },
      // 隐患整改率
      dangerRectifyData: {
        name: '隐患整改率',
        value: '',
        classifyData: [
          { name: '已整改', value: 0, key: 'yzgTotal' },
          { name: '未整改', value: 0, key: 'wzgTotal' }
        ]
      },
      // 报警类型统计
      index: 0,
      list: [
        { label: '传感器报警' },
        { label: '视频报警' }
      ],
      // currenYear: parseTime(new Date(), '{y}'),
      cgqData: [],
      spData: [],
      pieData: [],
      stasticData: [
        { name: '在聘专家数量', value: 0, icon: '&#xe607;' },
        { name: '本年度事故事件', value: 0, icon: '&#xe6b7;' },
        { name: '高层建筑总数', value: 0, icon: '&#xe6b7;' }
      ],
      loadApi: 0,
      apiNum: 10,
      accidentEventLevelData: []
    }
  },
  mounted() {
    this.layout.showAreaLoading(['.firms-content.content-box', '.fireFighting-content', '.barChartTeam', '.danger-content-area', '.barChart1-area', '.pieChart-area'])
    this.$nextTick(() => {
      this.getData()
    })
  },
  methods: {
    getData() {
      this.getCompanyStatistics() // 企业数量
      this.importantPositionNum() // 消防重点部位
      this.emergencyTeamNum() // 应急队伍
      this.dangersLevelNum() // 隐患数量
      this.dangersLedgerRate() // 隐患整改率
      this.dangerCategoryAnalysis() // 隐患类别统计
      this.selecteventTypeAlarmCount('one') // 传感器报警统计
      this.getExpertStatistics() // 专家数量
      this.environmentEventNumText() // 本年度事故事件
      this.accidentEventLevel() // 事故等级分析
      this.highBuildHomePage() // 高层建筑数量
    },
    pitfallSearch() {
      this.dangersLevelNum()
      this.dangersLedgerRate()
      this.dangerCategoryAnalysis()
    },
    hideLoading() {
      this.loadApi++
      if (this.loadApi >= this.apiNum) {
        this.layout.hideAreaLoading(['.firms-content.content-box', '.fireFighting-content', '.barChartTeam', '.danger-content-area', '.barChart1-area', '.pieChart-area'])
        // this.layout.hideAreaLoading(['.safety-wrap'])
      }
    },
    // 企业数量
    async getCompanyStatistics() {
      const { data, status } = await getCompanyStatistics({ companyIds: -1 })
      if (data && status === 0) {
        const numArr = data.numList.map((val) => ({
          name: val.modifiedColumn,
          value: val.count
        }))
        this.firmsData.value = data.total
        this.firmsData.classifyData = numArr
      }
      this.hideLoading()
    },
    // 事故等级分析
    async accidentEventLevel() {
      const { data, status } = await accidentEventLevel({ companyId: -1, years: currentTime('年') })
      if (data && status === 0) {
        this.accidentEventLevelData = data.map((val) => ({ name: val.typename, value: val.num }))
        this.initPieChartSgsj()
      }
      this.hideLoading()
    },
    // 消防重点部位
    async importantPositionNum() {
      const { data, status } = await importantPositionNum({ companyIds: '-1' })
      if (data && status === 0) {
        this.fireFightingData = data.map(x => {
          return {
            name: x.type,
            value: x.number,
            icon: this.getImportantPositionIcon(x.type)
          }
        })
      }
      this.hideLoading()
    },
    // 应急队伍
    async emergencyTeamNum() {
      const { data, status } = await emergencyTeamNum({ companyIds: -1 })
      if (data && status === 0) {
        data.splice(data.findIndex(val => val.typename === '应急队伍数量'), 1)
        this.initBarChart(data)
      }
    },
    // 隐患数量
    async dangersLevelNum() {
      const { data, status } = await dangersLevelNum({ year: this.yearlbtj })
      if (data && status === 0) {
        this.dangerData.value = data[0].total
        this.dangerData.classifyData.forEach(x => {
          x.value = data[0][x.key]
        })
      }
      this.hideLoading()
    },
    // 隐患整改率
    async dangersLedgerRate() {
      const { data, status } = await dangersLedgerRate({ year: this.yearlbtj })
      if (data && status === 0) {
        this.dangerRectifyData.value = data[0].zgl !== undefined ? data[0].zgl + '%' : ''
        this.dangerRectifyData.classifyData.forEach(x => {
          x.value = data[0][x.key]
        })
      }
      this.hideLoading()
    },
    // 高层建筑总数
    async highBuildHomePage() {
      const { data, status } = await highBuildHomePage({ year: currentTime('年') })
      if (data && status === 0) {
        this.stasticData.forEach(x => {
          if (x.name === '高层建筑总数') {
            x.value = data[0].highbuildnum
          }
        })
      }
      this.hideLoading()
    },
    // 隐患类别统计
    async dangerCategoryAnalysis() {
      const { data, status } = await dangerCategoryAnalysis({ year: this.yearlbtj })
      if (data && status === 0) {
        this.initBarChart1(data)
      }
      this.hideLoading()
    },
    // 传感器报警统计
    async selecteventTypeAlarmCount(isFirst) {
      if (!isFirst) { this.layout.showAreaLoading(['.alarm-wrap']) }
      const { data, status } = await selecteventTypeAlarmCount({ companyId: -1, year: this.yearbjlx })
      if (data && status === 0) {
        this.cgqData = data.map((val) => ({
          name: val.eventtype,
          num: val.amount
        }))
        // .filter(val => val.num > 0)
        this.initPieChart()
      }
      if (isFirst) {
        this.hideLoading()
      } else {
        this.layout.hideAreaLoading(['.alarm-wrap'])
      }
    },
    // 视频报警统计
    async selectVideoeventTypeAlarmCount() {
      this.layout.showAreaLoading(['.alarm-wrap'])
      const { data, status } = await selectVideoeventTypeAlarmCount({ companyId: -1, year: this.yearbjlx })
      if (data && status === 0) {
        this.spData = data.map((val) => ({
          name: val.eventtype,
          num: val.amount
        }))
        // .filter(val => val.num > 0)
        this.initPieChart()
      }
      this.layout.hideAreaLoading(['.alarm-wrap'])
    },
    searchBjlx() {
      if (this.index === 0) {
        this.selecteventTypeAlarmCount()
      } else if (this.index === 1) {
        this.selectVideoeventTypeAlarmCount()
      }
    },
    // 专家数量
    async getExpertStatistics() {
      const { data, status } = await getExpertStatistics({ companyId: -1 })
      if (data && status === 0) {
        this.stasticData.forEach(x => {
          if (x.name === '在聘专家数量') {
            x.value = data.expertTotal
          }
        })
      }
      this.hideLoading()
    },
    // 本年度事故事件
    async environmentEventNumText() {
      const { data, status } = await environmentEventNumText({
        companyIds: -1,
        startTime: currentTime('年') + '-01-01',
        endTime: currentTime('年月日')
      })
      if (data && status === 0) {
        this.stasticData.forEach(x => {
          if (x.name === '本年度事故事件') {
            x.value = data.find((val) => val.typename === '事故发生数量')?.num
          }
        })
      }
      this.hideLoading()
    },
    // 获取消防重点部位图标
    getImportantPositionIcon(val) {
      let icon = '&#xec54;'
      switch (val) {
        case '性质重要发生事故影响全局部位':
          icon = '&#xec54;'
          break
        case '易燃易爆、危化品场所':
          icon = '&#xe69d;'
          break
        case '其他':
          icon = '&#xe634;'
          break
        case '人员和物资集中场所':
          icon = '&#xe792;'
          break
        case '科研生产试验场所':
          icon = '&#xe63e;'
          break
        case '消防设备设施场所':
          icon = '&#xe60e;'
          break
      }
      return icon
    },
    initBarChart(data) {
      const dataX = []
      const dataY = []
      data.forEach(x => {
        dataX.push(x.typename)
        dataY.push(x.num)
      })
      const dataSeries = [{
        name: '应急队伍',
        type: 'bar',
        labelShow: true,
        labelTextColor: '#333',
        data: dataY,
        itemStyleColor: '#6a99f9'
      }
      ]
      const params = {
        legendShow: false,
        tooltipShow: true,
        gridRight: '5%',
        gridTop: '12%',
        gridLeft: '0%',
        gridBottom: '12%'
      }
      const chart = this.$refs.barChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineChart(dataX, dataSeries, params))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initBarChart1(dataForUse) {
      const xData1 = []
      const xData2 = []
      const yData = []
      if (dataForUse.length > 0) {
        dataForUse.map((v) => {
          xData1.push(v.yzgNum)
          xData2.push(v.wzgNum)
          yData.push(v.typeName)
        })
      }
      const dataSeries = [{
        name: '已整改',
        type: 'bar',
        stack: 1,
        data: xData1.reverse(),
        itemStyleColor: '#6a99f9'
      }, {
        name: '未整改',
        type: 'bar',
        stack: 1,
        data: xData2.reverse(),
        itemStyleColor: '#ccdfff'
      }
      ]
      const params = {
        legendShow: true,
        tooltipShow: true,
        gridRight: '5%',
        gridTop: '12%',
        gridLeft: '0%',
        gridBottom: '12%',
        legendBottom: 2
      }
      const chart = this.$refs.barChart1
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineHorizontalChart(yData.reverse(), dataSeries, params))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    // 报警类型统计 传感器和视频切换
    tagChange(tagArg) {
      this.index = tagArg.index
      tagArg.item.label === '传感器报警' ? this.selecteventTypeAlarmCount() : this.selectVideoeventTypeAlarmCount()
    },
    initPieChart() {
      const data = this.index === 0 ? this.cgqData : this.spData
      // .filter(x => { return x.num !== 0 })
      this.pieData = data
      const colorList = ['#646307', '#9d3bb9', '#f9cddd', '#a8e9bc', '#c4dafb', '#f9f0c8', '#9be5ea', '#eee15a', '#dcd2f9', '#a82538', '#205e16', '#3b39bb', '#914e12', '#214e78', '#4d4b07', '#782d95']
      let total = 0
      const dataList = data.map((v, i) => {
        total += v.num
        return {
          value: v.num,
          name: v.name,
          itemStyle: { color: colorList[i] },
          label: { color: '#333', position: 'outside', formatter: '{d}%' }
        }
      })
      const dataSeries = [
        {
          name: '',
          radius: ['50%', '80%'],
          center: ['50%', '50%'],
          data: dataList,
          label: {
            show: false
          }
        }
      ]
      const params = {
        tooltipShow: true,
        legendShow: false,
        // legendBottom: 5,
        legendLeft: 'center',
        // legendRight: this.index === 0 ? '20%' : 0,
        titleShow: true,
        titleText: '共' + total,
        titleX: '44%',
        titleY: '46%',
        titleColor: '#333',
        tooltipFormatter: '{b}：{c}（{d}%）'
      }
      const chart = this.$refs.pieChart
      if (chart) {
        if (data.length > 0 && total > 0) {
          const myChart = this.$echarts.init(chart)
          const option = pieChart(params, dataSeries)
          myChart.setOption(option, true)
          this.setLegend(chart, myChart)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
          // chart.removeAttribute('_echarts_instance_')
          // chart.innerHTML = '暂无数据'
        }
      }
    },
    // 事故等级分析chart图
    initPieChartSgsj() {
      const data = this.accidentEventLevelData
      const total = data.reduce((previousValue, currentValue) => previousValue + currentValue.value, 0)
      const dataSeries = [
        {
          radius: ['85%', '55%'],
          center: ['50%', '50%'],
          labelLine: {
            length: '8%',
            show: true,
            position: 'outside'
          },
          data: data,
          avoidLabelOverlap: false,
          label: {
            color: '#606266',
            lineHeight: 16,
            fontWeight: 'bold',
            formatter: (params) => {
              return params.percent > 0 ? `${params.percent}%` : ''
            }
          }
        }
      ]
      const params = {
        tooltipShow: true,
        tooltipFormatter: '{b}：{c}（{d}%）',
        titleShow: true,
        titleText: total,
        titleTextAlign: 'center',
        titleX: '48%',
        titleY: 'center',
        titleSize: 100,
        saveAsImageName: '事故等级分析'
      }
      const chart = this.$refs.accidentLevel
      if (chart) {
        if (data.length > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(pieChart(params, dataSeries, ['#6395F9', '#FFEC3D', '#F6C022', '#FF6D3E', '#F5222D'].reverse()))
          this.setLegend(chart, myChart)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-page-year{
  ::v-deep .timer-title{
    margin: 0;
  }
}
  .fire-wrap {
    background-color: #fff;
    .content-box {
      padding: 10px;
      background-color: #e5feff;
      border-radius: 10px;
      border: solid 2px #07cdd4;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .total {
        width: 25%;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 0.373rem;
        line-height: 0.533rem;
        h3 {
          color: #07cdd4;
        }
      }
      ul {
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 100%;
          display: flex;
          justify-content: space-between;
          height: 50px;
          background-color: rgba(139, 220, 223, 0.5);
          border-left: solid 2px #07cdd4;
          border-right: solid 2px #07cdd4;
          margin: 5px 5px;
          align-items: center;
          padding: 0 10px;
          color: #051b32;
          position: relative;
          &::before {
            content: '';
            width: 100%;
            height: 1px;
            border-left: 6px solid #07cdd4;
            border-right: 6px solid #07cdd4;
            position: absolute;
            top: 0;
            left: 0;
          }
          &::after {
            content: '';
            width: 100%;
            height: 1px;
            border-left: 6px solid #07cdd4;
            border-right: 6px solid #07cdd4;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
      &.danger-content {
        background-color: #cedeff;
        border: solid 2px #6a99f9;
        .total {
          width: 42%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          position: relative;
          padding-left: 0.267rem;
          align-items: center;
          &::before {
            content: '';
            left: 0;
            height: 0.373rem;
            width: 0.106rem;
            position: absolute;
            top: 0.187rem;
            background-color: #6a99f9;
          }
          h3 {
            color: #6a99f9;
            margin-left: 0.133rem;
          }
        }
        ul {
          width: 58%;
          li {
            width: calc(50% - 10px);
            background-color: rgba(159, 189, 248, 0.5);
            border-left: solid 2px #6a99f9;
            border-right: solid 2px #6a99f9;
            div {
              display: flex;
              width: 30%;
            }
            &::before {
              border-left: 6px solid #6a99f9;
              border-right: 6px solid #6a99f9;
            }
            &::after {
              border-left: 6px solid #6a99f9;
              border-right: 6px solid #6a99f9;
            }
          }
        }
        &.danger-content1 {
          background-color: #c3eadd;
          border: solid 2px #42d7a7;
          .total {
            width: 42%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            position: relative;
            padding-left: 0.267rem;
            align-items: center;
            &::before {
              content: '';
              left: 0;
              height: 0.373rem;
              width: 0.106rem;
              position: absolute;
              top: 0.187rem;
              background-color: #42d7a7;
            }
            h3 {
              color: #42d7a7;
              margin-left: 0.133rem;
            }
          }
          ul {
            width: 58%;
            li {
              width: calc(50% - 10px);
              background-color: rgba(136, 230, 200, 0.5);
              border-left: solid 2px #42d7a7;
              border-right: solid 2px #42d7a7;
              div {
                display: flex;
                width: 30%;
              }
              &::before {
                border-left: 6px solid #42d7a7;
                border-right: 6px solid #42d7a7;
              }
              &::after {
                border-left: 6px solid #42d7a7;
                border-right: 6px solid #42d7a7;
              }
            }
          }
        }
      }
    }
    .fireFighting-content {
        ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: calc(50% - 5px);
            align-items: center;
            text-align: center;
            background-color: #eafeff;
            margin-bottom: 0.267rem;
            display: flex;
            flex-direction: column;
            padding: 0.267rem;
            i {
              font-size: 0.667rem;
              color: #fff;
              background-color: #07cdd4;
              width: 0.933rem;
              height: 0.933rem;
              line-height: 0.933rem;
              text-align: center;
              border-radius: 0.158rem;
              margin-bottom: 0.133rem;
            }
            b {
              font-size: 0.533rem;
              margin-bottom: 0.133rem;
              color: #07cdd4;
              font-weight: bold;
            }
            span {
              line-height: 0.373rem;
              font-size: 24px;
            }
            &:nth-child(2) {
              background-color: #fff6ec;
              i {
                background-color: #ff8a00;
              }
              b {
                color: #ff8a00;
              }
            }
            &:nth-child(3) {
              background-color: #ebf2ff;
              i {
                background-color: #6a99f9;
              }
              b {
                color: #6a99f9;
              }
            }
            &:nth-child(4) {
              background-color: #e7fdf6;
              i {
                background-color: #42d7a7;
              }
              b {
                color: #42d7a7;
              }
            }
            &:nth-child(5) {
              background-color: #ebf5ff;
              i {
                background-color: #3f99ff;
              }
              b {
                color: #3f99ff;
              }
            }
            &:nth-child(6) {
              background-color: #eafeff;
              i {
                background-color: #07cdd4;
              }
              b {
                color: #07cdd4;
              }
            }
          }
        }
      }
    .customTimer {
      margin: 0;
      width: 2.133rem;
      border: 1px solid #3795ff;
      border-radius: 0.106rem;
      ::v-deep .timer-box .down {
        color: #3795ff;
      }
    }
    .stasticBox {
      display: flex;
      margin-top: 10px;
      li {
        width: calc(50% - 5px);
        margin-right: 10px;
        background-image: linear-gradient(-40deg, #4676f3 0%,  #62beff 100%),
        linear-gradient(#eff4fc, #eff4fc);
        background-blend-mode: normal, normal;
        border-radius: 5px;
        padding: 20px 10px;
        align-items: center;
        &:last-child {
          margin-right: 0;
        }
        &:nth-child(2) {
          background-image: linear-gradient(-40deg, #606eef 0%,#91a0ff 100%),
          linear-gradient( #eff4fc, #eff4fc);
          background-blend-mode: normal, normal;
          .iconBox {
            .iconfont {
              color: #606eef;
            }
          }
        }
        .iconBox {
          background-color: rgba(255, 255, 255, 0.6);
          padding: 6px;
          border-radius: 50%;
          width: 72px;
          height: 72px;
          margin: 0 auto;
          .iconfont {
            width: 60px;
            height: 60px;
            display: inline-block;
            text-align: center;
            line-height: 60px;
            background-color: #ffffff;
            color: #62beff;
            font-size: 0.533rem;
            border-radius: 50%;
          }
        }
        .numBox {
          color: #fff;
          margin-top: 20px;
          text-align: center;
          h3 {
            font-size: 12px;
            line-height: 0.427rem;
          }
          b {
            font-size: 0.373rem;
            font-weight: bold;
            line-height: 0.533rem;
          }
        }
      }
    }
  }
</style>
